<script>
import { ElMessage } from 'element-plus'
//加密
import md5 from 'md5'
import axios from 'axios'
import ajax from '@/utils/request'
import {loginFn} from '@/api/user'
import { mapMutations } from 'vuex'
export default {
  data() {
    return {
      adminname:'',
      password:'',
      color:false
    }
  },
  mounted() {
    //在js中使用数据需要 this. 获取
    // this.adminname
    // console.log(this.$store.state.count);
  },
  methods: {

    //通过辅助函数的方式调用mutations中的定义方法
    ...mapMutations(['changeUserInfo']),
    // addclick(){

    //   // commit 是用来调用mutations中定义的方法 
    //   this.$store.commit('add')
    // },
    // addClick(){
    //   this.addNum(5)
    // },
    loginClick(){
      //账号密码验证
      // if(this.adminname.length<6){
      //   ElMessage.error("管理员账号长度要大于六位")
      //   this.color=true;
      //   return
      // }
      // if(!/^\S*(?=\S{6,})(?=\S*\d)(?=\S*[A-Z])(?=\S*[a-z])(?=\S*[!@#$%^&*? ])\S*$/.test(this.password)){
      //   ElMessage.error('管理员密码要包含大写，小写字母、数字和特殊符号组成的6位以上密码')
      //   this.color=true;
      //   return
      // }

      //为保证密码安全性，将需要加密的密码传递到md函数中，该函数返回一个加密后内容，因为普通密码较为简单，需对传入内容进行二次处理，处理后再加密
      //注册时加密方式需要和登录时相同
        // console.log(md5('千锋@#123456%&教育'));

      //第一种请求方法：通过axios直接请求  
      //   axios.post('http://121.89.205.189:3000/admin/admin/login',{
      //     adminname:this.adminname,
      //     password:this.password
      //   })
      //   .then(res=>{
      //     console.log('请求成功',res);
      //   })
      //   .catch(res=>{
      //     console.log('请求失败');
      //   })
      //   .finally(res=>{
      //     console.log('请求结束');
      //   })
      // this.color=false

        //第二种，直接使用封装的ajax
        // ajax({
        //   url:'/adamin/login',
        //   method:'post',
        //   data:{
        //     adminname:this.adminname,
        //     password:this.password
        //   }
        // }).then(res=>{
        //   console.log(res);
        // })

      //第三种方式
      loginFn({
          adminname:this.adminname,
          password:this.password
      }).then(res=>{
        console.log(res);
        if(res.code==200){

        //将用户信息保存在全局状态中
        this.changeUserInfo(res.data)
        
        //跳转到首页
        this.$router.push('/')
        }else{
          ElMessage.error(res.message)
        }
       
      })
    }
  },
}
</script>

<template>
  <div class="login-container">
    <div class="form">
      <h2 :class="{color:color}">
        登录页面
        <!-- 在模板中使用无需加this. -->
        <!-- {{ $store.state.count }}
        <el-button type="primary" @click="addclick">点击加1</el-button>
        <el-button type="primary" @click="addClick">点击加指定数</el-button> -->
      </h2>
      <el-input clearable v-model="adminname" placeholder="请输入管理员账号"></el-input>
      <el-input @keyup.enter="loginClick" clearable v-model="password" class="password" placeholder="请输入管理员密码"></el-input>
      <el-button class="login" type="primary" @click="loginClick">登录</el-button>
    </div>

    
  </div>
</template>

<style scoped lang="scss">
  .login-container{
    height: 100%;
    background-color: rgb(230, 242, 253);

    .form{
      width: 360px;
      background-color: #fff;
      position: absolute;
      left: 50%;
      top: 50%;
      transform: translate(-50%,-50%);
      padding: 10px 34px 20px 34px;
      border-radius: 15px;
      h2{
        text-align: center;
      }
      .password{
        margin: 20px 0
      }
      .login{
        width: 100%;
      }
    }
  }
  
  .color {
    color:red;
  }
</style>
